<template>
  <div>
    <el-table v-if="isOneOrTwo" :data="dataList" :border="true" style="width: 100%">
      <el-table-column :prop="columnPropOne" :label="columnLabelOne" align="center"></el-table-column>
      <template #empty>
        <span>暂无数据</span>
      </template>
    </el-table>

    <el-table v-else :data="dataList" :border="true" style="width: 100%">
      <el-table-column :prop="columnPropOne" :label="columnLabelOne" align="center"></el-table-column>
      <el-table-column :prop="columnPropTwo" :label="columnLabelTwo" align="center"></el-table-column>
      <template #empty>
        <span>暂无数据</span>
      </template>
    </el-table>
  </div>
</template>
<script setup lang="ts">
  import axios from "axios";
  import { ref, watch } from "vue";
  import { getServerUrl } from "@/utils/url";
  const serverUrl = getServerUrl();
  const props = defineProps({
    tab: {
      type: String,
      default: "",
    },
    systemId: {
      type: String,
      default: "",
    },
    currentTab: {
      type: String,
      default: "",
    },
    columnPropOne: {
      type: String,
      default: "",
    },
    columnLabelOne: {
      type: String,
      default: "",
    },
    columnPropTwo: {
      type: String,
      default: "",
    },
    columnLabelTwo: {
      type: String,
      default: "",
    },
    isOneOrTwo: {
      type: Boolean,
      default: true,
    },
  });

  watch(
    () => props.currentTab,
    newVal => {
      if (newVal === "tab2" && props.tab === "tab2") {
        getMainCompileUnit();
      }
    }
  );

  const dataList = ref([]);

  const getMainCompileUnit = () => {
    dataList.value = [];
    axios.get(serverUrl + "standardSystem/editorUnit/list?systemId=" + props.systemId + "&unitType=1&pageNum=1&pageSize=100").then(res => {
      dataList.value = res.data.data.list;
    });
  };
</script>
<style scoped></style>
